<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>华为P9</title>
	<style type="text/css">
		body,div,button,img,ul,li{
			padding:0;
			margin:0;
		}
		.wrap{
			width:370px;
			height:450px;
			float:left;
			position:relative;
		}
		.show{
			width:350px;
			height:350px;
			margin:10px;
			position:relative;
		}
		.movediv{
			width:175px;
			height:175px;
			position:absolute;
			left:0px;
			top:0px;
			background:#FF0;
			filter:alpha(opacity=30);
			opacity:0.3;
			display:none;
		}
		button{
			width:14px;
			height:23px;
		}
		.btn1{
			position:absolute;
			top:388px;
			left:33px;
		}
		.btn2{
			position:absolute;
			top:388px;
			left:325px;
		}
		.magnify{
			width:400px;
			height:400px;
			overflow: hidden;
			float:left;
			display:none;
		}
		.imgnav{
			margin:10px 55px 0 55px;
			width:260px;
			height:52px;
			overflow: hidden;
		}
		ul{
			list-style-type:none;
			width:416px;
			height:52px;
		}
		li{
			float:left;
			height:50px;
			width:50px;
			border:1px solid #fff;
		}
	</style>
</head>
<body>
	<div class="wrap">
		<buttion class="btn1">
			<img src="images/left.jpg" alt="">
		</buttion>
		<buttion class="btn2">
			<img src="images/right.jpg" alt="">
		</buttion>
		<div class="show">
			<img src="images/21.jpg" alt=""/>
			<div class="movediv"></div>
		</div>
		<div class="imgnav">
			<ul>
				<li>
					<img src="images/11.jpg" index="1" alt=""/>
				</li>
				<li>
					<img src="images/12.jpg" index="2" alt=""/>
				</li>
				<li>
					<img src="images/13.jpg" index="3" alt=""/>
				</li>
				<li>
					<img src="images/14.jpg" index="4" alt=""/>
				</li>
				<li>
					<img src="images/15.jpg" index="5" alt=""/>
				</li>
				<li>
					<img src="images/16.jpg" index="6" alt=""/>
				</li>
				<li>
					<img src="images/17.jpg" index="7" alt=""/>
				</li>
				<li>
					<img src="images/18.jpg" index="8" alt=""/>
				</li>
			</ul>
		</div>
	</div>
	<div class="magnify">
		<img src="images/31.jpg" alt=""/>
	</div>
<script type="text/javascript" src="jquery-1.12.4.min.js"></script>
<script>
	$(function(){
		var ratio=$(".magnify").width()/$(".movediv").width();
		$("li").mouseover(function(){
			$(this).siblings().css("border","1px solid #fff");
			$(this).css("border","1px solid red");
			var x=$(this).children().attr('index');
			$(".show img").attr("src","images/2"+x+".jpg");
			$(".magnify img").attr("src","images/3"+x+".jpg");
		})
		$(".btn1").click(function(){
			var scl=$(".imgnav").scrollLeft();
			if(scl<150){
				$(".imgnav").scrollLeft(scl+52);
			}else{
				$(".btn1 img").attr("src","images/left.jpg");
				$(".btn1").css("cursor","auto");
			}
		})
		$(".btn2").click(function(){
			var scl=$(".imgnav").scrollLeft();
			if(scl>0){
				$(".imgnav").scrollLeft(scl-52);
			}else{
				$(".btn2 img").attr("src","images/right.jpg");
	 			$(".btn2").css("cursor","auto");
			}
		})
		$(".btn1,.btn2").mouseover(function(){
			var scl=$(".imgnav").scrollLeft();
	 		if(scl==0){
	 			$(".btn1 img").attr("src","images/aleft.jpg");
	 			$(".btn1").css("cursor","pointer");
			}else if(scl>0&&scl<156){
				$(".btn1 img").attr("src","images/aleft.jpg");
				$(".btn1,.btn2").css("cursor","pointer");
	 			$(".btn2 img").attr("src","images/aright.jpg");
			}else if(scl==156){
	 			$(".btn2 img").attr("src","images/aright.jpg");
	 			$(".btn2").css("cursor","pointer");
			}
		})
		$(".btn1,.btn2").mouseout(function(){
			$(".btn1 img").attr("src","images/left.jpg");
			$(".btn2 img").attr("src","images/right.jpg");
		})
		$(".show").mousemove(function(event){
			$(".show").css("cursor","move");
			var event=event||window.event;
			var movex = event.clientX - $(".show").get(0).offsetLeft - $(".movediv").width()/2;
            var movey = event.clientY - $(".show").get(0).offsetTop - $(".movediv").height()/2;
            var maxx = $(".show").width()-$(".movediv").width();
            var maxy = $(".show").height()-$(".movediv").height();
            $(".movediv").css("display","block");
			$(".magnify").css("display","block");
            if(movex<0){
            	movex=0;
            }
            if(movex>maxx){
            	movex=maxx;
            }
            if(movey<0){
            	movey=0;
            }
            if(movey>maxy){
            	movey=maxy;
            }
            $(".movediv").css("left",movex);
            $(".movediv").css("top",movey);
            $(".magnify").scrollLeft(movex*ratio);
            $(".magnify").scrollTop(movey*ratio);
		})
		$(".show").mouseout(function(){
			$(".movediv").css("display","none");
			$(".magnify").css("display","none");
		})
	})
</script>
</body>
</html>